<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>15_jQuery-class基本操作</title>
  <!-- 
  在 jQuery 中， `class`  操作是非常常用的功能，主要用于添加、删除和切换元素的 CSS 类。以下是 jQuery 中关于  `class`  的基本操作总结说明。
  一、添加类
   1.  `addClass()` 
  用于向选定的元素添加一个或多个类。

   语法
  $(selector).addClass(className);
   示例
  $('.myElement').addClass('newClass'); // 向所有类名为 myElement 的元素添加 newClass
  $('.myElement').addClass('class1 class2'); // 同时添加多个类
  二、删除类
   1.  `removeClass()` 
  用于从选定的元素中删除一个或多个类。

   语法
  $(selector).removeClass(className);
   示例
  $('.myElement').removeClass('oldClass'); // 从所有类名为 myElement 的元素中删除 oldClass
  $('.myElement').removeClass('class1 class2'); // 同时删除多个类
  三、切换类
   1.  `toggleClass()` 
  用于切换选定元素的类。如果元素中存在指定类，则删除该类；如果不存在，则添加该类。

   语法
  $(selector).toggleClass(className);
   示例
  $('.myElement').toggleClass('active'); // 如果 myElement 中存在 active 类，则删除它；否则添加它
  四、检查类

   1.  `hasClass()` 
  用于检查选定的元素是否具有指定的类。
   语法
  $(selector).hasClass(className);
   示例
  if ($('.myElement').hasClass('active')) {
      console.log('元素具有 active 类');
  } else {
      console.log('元素不具有 active 类');
  }
  五、总结
  - 添加类：使用  `addClass()`  方法可以向元素添加一个或多个类。
  - 删除类：使用  `removeClass()`  方法可以从元素中删除一个或多个类。
  - 切换类：使用  `toggleClass()`  方法可以在元素中切换类的存在状态。
  - 检查类：使用  `hasClass()`  方法可以检查元素是否具有指定的类。
  -->
</head>
<body>

  <ul class="active list">
    <li class="li-1">li-1</li>
    <li class="li-2">li-2</li>
    <li class="li-3">li-3</li>
    <li class="li-4">li-4</li>
    <li class="li-5">li-5</li>
  </ul>

  <button class="toggle">切换class</button>
  <script src="../libs/jquery-3.6.0.js"></script>

  <script>
    $(function() {
      // 1. 添加类
      // $('.list').addClass('list1 list2'); // 同时添加多个类
      // $('ul li').addClass(['list1', 'list2'])
      
      // 2. 删除类
      // $('.myElement').removeClass('class1 class2'); // 同时删除多个类

      // 3. 切换类
      $('.toggle').click(function() {
        $('ul').toggleClass('active');
      })

      // 4. 检查类
      if ($('.list').hasClass('active')) {
        console.log('元素具有 active 类');
      } else {
        console.log('元素不具有 active 类');
      }
    })

  </script>
  
</body>
</html>